<template>
	<ul class="nav flex-column nav-pills">
		<li class="nav-item">
			<router-link to="/" class="nav-link">
				<span>
					全部图书
				</span>
			</router-link>
		</li>
		<li class="nav-item">
			<router-link to="/Search" class="nav-link">
				<span>
					搜索
				</span>
			</router-link>
		</li>
		<li class="nav-item">
			<router-link to="/Test" class="nav-link">
				<span >
					测试
				</span>
			</router-link>
		</li>
		<li class="nav-item">
			<router-link to="/MyInfo" class="nav-link">
				<span >
					个人信息
				</span>
			</router-link>
		</li>
	</ul>
</template>



<script>
	import {
		computed,
		reactive,
		toRefs,
		getCurrentInstance
	} from "vue";
	import store from "../store/index"
	export default {
		setup() {
			const data = reactive({
				item: store.state.item,
				changeItem: (item) => {
					store.commit("changItem", item)
					console.log(store.state.item);
				}
			});
			return {
				...toRefs(data),
			};
		}
	};
</script>

<style>
	.nav-item{
		margin: 10px 0;
	}
</style>